<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="referrer" content="never">
    <link rel="stylesheet" href="./css/base.css">
    <script src="./js/common.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/jquery-1.8.0.min.js"></script>
    <title>电影分类</title>
    <template id="navBar">
        <!-- 头部搜索框 start -->
        <nav class="nav-box">
            <div class="nav-input">
                <input type="text" @focus="showBtn=true" @blur="showBtn=false">
                <!-- <input type="text" @focus="changeShowBtn(true)" @blur="changeShowBtn(false)"> -->
            </div>
            <div v-show="showBtn" class="nav-btn">
                <span>搜索</span>
            </div>
        </nav>
        <!-- 头部搜索框 end -->
    </template>
    <template id="filmItem">
        <!-- 电影展示组件 start -->
        <div class="film-item">
            <div class="film-img" style="background-image: url(./imgs/film.jpg)"></div>
            <div class="film-title">蚁人2：黄蜂女现身</div>
            <div class="film-source">
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img close"></span>
                <span class="star-img close"></span>
                <span class="star-source">7.9</span>
            </div>
        </div>
        <!-- 电影展示组件 end -->
    </template>
    <template id="filmList">
        <div>
            <!-- 电影展示组件 start -->
            <div class="film-item" v-for="(film,index) in list" :key="film.filmId">
                <div class="film-img" style="background-image: url('./imgs/timg.jpg');background-position:40% 50%;"></div>
                <div class="film-title">{{film.filmName}}</div>
                <div class="film-source">
                    <span class="star-img open"></span>
                    <span class="star-img open"></span>
                    <span class="star-img open"></span>
                    <span class="star-img close"></span>
                    <span class="star-img close"></span>
                    <span class="star-source">{{film.source|getSource()}}</span>
                </div>
            </div>
            <!-- 电影展示组件 end -->
        </div>
    </template>
    <script>
        window.onload = function () {
            new Vue({
                el: ".app",
                components: {
                    NavBar: {
                        template: "#navBar",
                        data() {
                            return {
                                showBtn: false
                            }
                        },
                        methods: {
                            changeShowBtn(arg) {
                                // console.log(arg);
                                this.showBtn = arg;
                            }
                        }
                    },
                    FilmItem: {
                        template: "#filmItem",
                    },
                    FilmList:{
                        template:"#filmList",
                        props:{
                            list:{
                                type:Array,
                                default(){
                                    return []
                                }
                            }
                        },
                        filters:{
                            getSource(arg){
                                return (arg*1).toFixed(1);
                            }
                        }
                    }
                },
                data:{
                    filmList:[]
                },
                methods:{
                    loadFilm(){
                        $.ajax({
                            url:"http://127.0.0.1:8090/filmApi/loadFilms.php",
                            type:"post",
                            data:{
                                size:11
                            },
                            dataType:"json",
                            success:({result})=>{
                                console.log(result);
                                this.filmList=result;
                            }
                        })
                    }
                },
                mounted(){
                    this.loadFilm();
                }
            })
        }
    </script>
</head>

<body>
    <!-- 项目容器 start-->
    <div class="app">
        <!-- 头部搜索框 start -->
        <nav-bar></nav-bar>
        <!-- 头部搜索框 end -->
        <!-- 首页正文 start -->
        <div class="content-box">
            <!-- 首页分类列表 start -->
            <div class="films-box">
                <div class="list-name">
                    <span>热门电影</span>
                </div>
                <!-- <div class="content-list">
                    <film-item v-for="(item,index) in 12" :key="index"></film-item>
                </div> -->
                <film-list class="content-list" :list="filmList"></film-list>
            </div>
            <!-- 首页分类列表 end -->
        </div>
        <!-- 首页正文 end -->
    </div>
    <!-- 项目容器 end-->
</body>

</html>